<template>
  <el-form label-width="80px">
    <div id="in-out-picker">
      <in-out-picker
        v-model:radio="radio"
        :name1="name1"
        :name2="name2"
      ></in-out-picker>
      <airport-picker v-model:airport="airport"></airport-picker>
    </div>
    <el-row>
      <flight-list :radio="radio" :flightList="flightList"></flight-list>
    </el-row>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue';
import FlightList from '../../components/FlightList.vue';
import InOutPicker from '../../components/Picker.vue';
import AirportPicker from '../../components/AirportPicker.vue';
import { FlightService } from '@/utils/api/flight';

export default defineComponent({
  name: 'FlightSchedule',
  components: {
    InOutPicker,
    FlightList,
    AirportPicker,
  },
  setup() {
    onMounted(() => {
      getList();
    });
    const name1 = '进港';
    const name2 = '出港';
    const radio = ref(true);
    const airport = ref('');
    const flightList = ref([
      {
        flightId: 'MU5110',
        status: 'true',
        arrivalCity: '上海虹桥',
        timePlan: '12:00',
        timeActual: '12:13',
        terminal: 'T2',
        gate: '63',
      },
    ]);
    const getList = () => {
      FlightService.selectFlightsInList({
        airportName: airport.value,
        op: radio.value === true ? 'arrival' : 'departure',
      }).then((res) => {
        console.log(res);
        (flightList.value as any) = res.data;
      });
    };
    watch(
      () => radio.value,
      () => {
        getList();
      }
    );
    watch(
      () => airport.value,
      () => {
        getList();
      }
    );
    return {
      radio,
      name1,
      name2,
      airport,
      flightList,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
#in-out-picker {
  margin-left: 0px;
  margin-top: -5px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 10px;
}
.airport-picker {
  float: right;
  height: 50px;
  // line-height: 50px;
}
.el-row {
  margin-left: 15px;
  line-height: 20px !important;
}
</style>
